<template>
    <div>
        <div class="ti-container">
            <!-- 登录 -->
            <div class="ti-login">
                <div>
                    用户名：<strong>{{username}}</strong>
                    <input
                            v-if="username === ''"
                            :class="{error: errorMessage !== ''}"
                            type="text"
                            v-model.trim="inputValue" />
                    <span v-if="errorMessage !== ''" class="error-txt">{{errorMessage}}</span>
                </div>
                <br>
                <div>
                    <button v-if="username==''" @click="login">登录</button>
                    <button v-else @click="username=''">退出</button>
                </div>
            </div>

            <!-- 答题 -->
            <div class="ti-list">
                <div class="mask" v-if="username==''"></div>

                <!-- 题 -->
                <div v-if="current < ti.length">
                    <h3>{{ti[current].title}}</h3>
                    <ul>
                        <li v-for="(i,k) in ti[current].options" :key="k">
                            <input name="ti" type="radio" :value="k" v-model="pickValue" />
                            {{i}}
                        </li>
                    </ul>
                    <div>
                        <button :disabled="buttonTxt !== '提交答案'" @click="submit">
                            {{buttonTxt}}
                        </button>
                        <div v-if="seconds>=0">{{seconds}}s后进入下一题</div>
                    </div>
                </div>
                <div v-else>
                    没有了。<button @click="reset">重做一遍</button>
                </div>
                <div class="bottom">
                    共有 {{current+1}}/{{ti.length}} 道题，
                    答对：{{right_count}}
                    答错：{{error_count}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import data from './data'
    export default {
        data () {
            return {
                buttonTxt: '提交答案',
                seconds: -1,
                ti: data.data,
                current: 0,
                username: '',
                inputValue: '',
                errorMessage: '',
                right_count: 0,
                error_count: 0,
                pickValue: -1
            }
        },
        methods: {
            login () {
                if (!/^\w{6,18}$/.test(this.inputValue)) {
                    this.errorMessage = '用户名必须是6~18位数字、字母、下划线。'
                } else {
                    this.username = this.inputValue
                    this.errorMessage = ''
                    this.inputValue = ''
                    this.reset()
                }
            },
            submit () {
                if (this.pickValue === -1) {
                    alert('必须选择一项')
                    return
                }
                if (this.pickValue === this.ti[this.current].right) {
                    this.doRight()
                } else {
                    this.doWrong()
                }
                this.pickValue = -1
                this.startTimer()
            },
            startTimer () {
                this.seconds = 3
                const si = setInterval(() => {
                    if (this.seconds <= 0) {
                        clearInterval(si)
                        this.current++
                        this.buttonTxt = '提交答案'
                    }
                    this.seconds--
                }, 1000)
            },
            doRight () {
                this.right_count++
                this.buttonTxt = '回答正确'
            },
            doWrong () {
                this.error_count++
                this.buttonTxt = '回答错误'
            },
            reset () {
                this.right_count = 0
                this.error_count = 0
                this.current = 0;

//              1.找出你手机号中唯一存在的数字;
//                 手机号:   17731001626
//                    最终返回结果:
//                       2 3
//              2.一个数组中好多数,找出数组中两两相加等于目标值(target)的元素,并打印;
//                var arr = [11,15,23,45,12,14];
//                var target = 26;
//
//                最终返回结果:
//                    11 15 12 14
            }
        }
    }
</script>

<style scoped>
    .ti-container {
        width: 100%;
        min-height: 300px;
        display: flex;
        justify-content: center;
    }
    .ti-login, .ti-list {
        border: 1px solid #ccc;
        padding: 5px;
        transition: all 3s;
    }
    .ti-login {
        width: 40%;
    }
    .ti-list {
        width: 60%;
        position: relative;
    }
    .ti-list .mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .9);
    }
    .ti-list .bottom {
        position: absolute;
        bottom: 0;
        padding: 5px;
    }
    .error {
        border: 1px solid #f00;
    }
    .error, .error-txt {
        color: #f00;
    }
    ul {
        list-style: none;
    }
</style>
